(function (){
    let content = document.querySelector('#content')
    let string = window.location.search
    let index = string.lastIndexOf("\=")
 
    id = string.substring(index + 1, string.length)
    // console.log(string);
    // console.log(id);
    let message
    let url = "http://81.70.162.221:3000/getBlog?id=" + id 
    console.log(url);
    axios.get(url).then(function(res){
      let blog = res.data;
      // console.log(blog);
      content.insertAdjacentHTML('afterbegin',`
        <div class="title">
          <h3>${blog.title}</h3>
          <p>发表于：${blog.createTime}</p>
        </div>
        <div class="main-content">
          <p>${blog.content}</p>
        </div>
        <div class="content-img">
          <img src="http://81.70.162.221:3000/${blog.image}" alt="">
        </div>
            
      `)
      // let comments = blog.comments
      // console.log(comments);
      let messageComment = document.querySelector('#message .comment')
      let url2 = "http://81.70.162.221:3000/getComments?id=" + id 
      console.log(url2);
      axios.get(url2, {
        params: {
          pageNum:1,
          pageSize:3
        }
      }).then(function(res2){
        let blog2 = res2.data.data;
        
        console.log(blog2);
        blog2.forEach(comment =>{
          messageComment.insertAdjacentHTML('afterbegin',`
            <div class="message-content">
              <div class="content-title flex">
                <img src="./images/blog-single/Rosiepht.png" alt=""> 
                <div class="user-content">
                  <span class="user">${comment.nickname}</span>
                  <span class="date">${comment.commentTime}</span>
                </div>
              </div>
              <div class="comments">
                <p>${comment.content}</p>
              </div>
            </div>
          `)
        })
      })
      // comments.forEach(comment =>{
      //   messageComment.insertAdjacentHTML('afterbegin',`
      //     <div class="message-content ">
      //       <div class="content-title flex">
      //         <img src="./images/blog-single/Rosiepht.png" alt=""> 
      //         <div class="user-content">
      //           <span class="user">${comment.nickname}</span>
      //           <span class="date">${comment.commentTime}</span>
      //         </div>
      //       </div>
      //       <div class="comments">
      //         <p>${comment.content}</p>
      //       </div>
      //     </div>
      //   `)
      // })
      let message = document.querySelectorAll('.message-content')
      // console.log(message);
    //   let show = 3
    // let btnMoreBox = document.querySelector('#message .more-box')
    // btnMoreBox.addEventListener('click',function(){
    //   let maxShow = show + 3
    //   if(maxShow > message.length){
    //     btnMoreBox.style.cursor = 'not-allowed'
    //   }
    //   for(var i = show ; i < maxShow ; i++){
    //     message[i].style.display = 'block'
    //   }
    //   show += 3
    // })
    })
    // let show = 3
    let btnMoreBox = document.querySelector('#message .more-box')
    btnMoreBox.addEventListener('click',function(){
      let message = document.querySelectorAll('.message-content')
      // let maxShow = show + 3
      // if(maxShow > message.length){
      //   btnMoreBox.style.cursor = 'not-allowed'
      // }
      // for(var i = show ; i < maxShow ; i++){
      //   message[i].style.display = 'block'
      // }
      // show += 3
      // let isClosed = true;
      // if(isClosed){
      //   message.classList.remove('look')
      // }
      // else{
      //   message.classList.add('look')
      // }
      // isClosed = !isClosed;
      
    });
    


    let btnPost = document.querySelector('#btn-post')
    btnPost.addEventListener('click', function(){
        let nameInput = document.querySelector('#name')
        let emailInput = document.querySelector('#email')
        let contentInput = document.querySelector('#input-content')
        let messageComment = document.querySelector('#message .comment')
        axios.post('http://81.70.162.221:3000/postComment', {
          nickname: nameInput.value,
          email: emailInput.value, 
          content: contentInput.value, 
          articleId: id,
          // commentTime: Date.now()
        }).then(function(res){
          if(res.data == 'success'){
            console.log('1111');
            alert('提交成功');
            let arr = JSON.parse(res.config.data);
            console.log(arr);
            messageComment.insertAdjacentHTML('afterbegin',`
            <div class="message-content ">
            <div class="content-title flex">
              <img src="./images/blog-single/Rosiepht.png" alt=""> 
              <div class="user-content">
                <span class="user">${arr.nickname}</span>
                <span class="date">${arr.commentTime}</span>
              </div>
            </div>
            <div class="comments">
              <p>${arr.content}</p>
            </div>
          </div>
            `)
          }
          
        });
      }, false)

      
})();